<template>
    <view class="pg">
        <view class="cont ml-25">
            <view class="w-700 fl-ro-cen gap-18 mb-50">
                <wd-img :width="60" :height="60" src="../../../../static/image/用户默认.svg" round mode="aspectFill" />
                <wd-text text="用户" bold size="50rpx" color="#333"></wd-text>
            </view>
            <view class="w-700 fl-ro-cen ju-bet mb-26">
                <view class="w-340 h-210 fl-ro-cen ju-bet rd-10 overflow-hidden px-50 bg-ffffff">
                    <wd-img :width="60" :height="60" src="../../../../static/image/优惠券.svg" />
                    <view class="fl-co-cen">
                        <wd-text text="0" bold size="50rpx" color="#333"></wd-text>
                        <wd-text text="优惠券" size="30rpx" color="#b0b0b0"></wd-text>
                    </view>
                </view>
                <view class="w-340 h-210 fl-ro-cen ju-bet rd-10 overflow-hidden px-50 bg-ffffff">
                    <wd-img :width="60" :height="60" src="../../../../static/image/积分.svg" />
                    <view class="fl-co-cen">
                        <wd-text text="0" bold size="50rpx" color="#333"></wd-text>
                        <wd-text text="积分" size="30rpx" color="#b0b0b0"></wd-text>
                    </view>
                </view>
            </view>
        </view>
        <wd-cell-group custom-class="mt-40">
            <wd-cell size="large" title="订单" border clickable :border="false">
                <template #icon>
                    <wd-img :width="24" :height="24" src="../../../../static/image/订单.svg" custom-class="ml-10 mr-20" />
                </template>
            </wd-cell>
            <wd-cell size="large" title="客服" border clickable>
                <template #icon>
                    <wd-img :width="24" :height="24" src="../../../../static/image/客服中心.svg" custom-class="ml-10 mr-20" />
                </template>
            </wd-cell>
            <wd-cell size="large" title="退出登录" border clickable @click="logout">
                <template #icon>
                    <wd-img :width="20" :height="20" src="../../../../static/image/退出登录.svg" custom-class="ml-10 mr-20" />
                </template>
            </wd-cell>
            <wd-cell size="large" title="进入商家" border clickable @click="to_user">
                <template #icon>
                    <wd-img :width="20" :height="20" src="../../../../static/image/进入.svg" custom-class="ml-10 mr-20" />
                </template>
            </wd-cell>
        </wd-cell-group>
        <wd-tabbar v-model="tabbar" @change="tab_change" active-color="#0055ff" inactive-color="#7d7e80" fixed bordered safeAreaInsetBottom placeholder>
            <wd-tabbar-item name="index" title="首页" icon="home"></wd-tabbar-item>
            <wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
        </wd-tabbar>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    import { onShow, onLoad } from '@dcloudio/uni-app';

    //标签的索引值
    const tabbar = ref('');

    //点击tabbar
    const tab_change = ({ value }) => {
        uni.switchTab({
            url: `/pages/merchant/${value}/${value}`
        });
    };

    //点击退出登录
    const logout = () => {
        uni.showModal({
            title: '是否退出登录',
            success: (res) => {
                if (res.confirm) {
                    uni.removeStorageSync('token');
                    uni.reLaunch({
                        url: '/pages/login/login'
                    });
                }
            }
        });
    };

    //进入用户
    const to_user = () => {
        uni.switchTab({
            url: '/pages/custom/index/index'
        });
    };

    onShow(() => {
        //由于wd-tabbar的bug，进入页面立马手动更新tabbar，实现图标换色
        tabbar.value = 'user';
        console.log(`进入了${tabbar.value}页`);
    });
</script>

<style lang="scss" scoped></style>
